<template>
  <div class="d_main">
    <na-table
      :datas.sync="tableData"
      :searchObj.sync="search"
      @updateDatas="getAllMaterils"
    >
      <template #slot1>
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="small"
          @click="handleAddBatchDeliver"
          >批量发货</el-button
        >
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="small"
          @click="handleAddDeliver"
          >单独发货</el-button
        >
      </template>
    </na-table>
    <el-dialog
      :title="'单独发货 - ' + deliverName"
      :visible.sync="isShowDeliverForm"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="bodyNoPadDialog bigDialog"
      height="90vh"
      width="75%"
    >
      <div class="dialogDody">
        <div class="flex" style="height: 100%">
          <div class="left_tag">
            <p
              class="nav1"
              :class="tabIndex == index ? 'active' : ''"
              v-for="(item, index) in tagList"
              :key="index"
              @click="handleTagClick(item, index)"
            >
              {{ item.title }}
            </p>
          </div>
          <div class="content_info" @scroll="scrollEvent">
            <el-form
              ref="formModel"
              :model="formModel"
              :rules="rules"
              :disabled="deliverState == 'see'"
              label-width="80px"
            >
              <div class="items" id="1">
                <div class="title pl0">
                  <h3>基本信息</h3>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="发货单号:">
                      <el-input
                        v-model="formModel.deliveryBillNo"
                        placeholder="保存后系统自动生成"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建日期:">
                      <el-input
                        :value="
                          deliverState == 'add'
                            ? getDate()
                            : formModel.createTime
                        "
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建人员:">
                      <el-input
                        :value="
                          deliverState == 'add' ? name : formModel.createByName
                        "
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="发货类型:">
                      <el-select
                        filterable
                        v-model="formModel.deliveryType"
                        style="width: 100%"
                        size="small"
                        disabled
                        placeholder="请选择"
                      >
                        <el-option label="成品发货" :value="1"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="客户名称:" prop="customerCode">
                      <el-select
                        v-model="formModel.customerCode"
                        placeholder="请选择客户名称"
                        clearable
                        style="width: 100%"
                        :disabled="deliverState == 'see' || deliveryBillState==1"
                        filterable
                        size="small"
                        @change="handleCustomerNameChange"
                      >
                        <el-option
                          v-for="item in customerList"
                          :key="item.customerCode"
                          :label="item.customerName"
                          :value="item.customerCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="2">
                <div class="title pl0">
                  <h3>寄方信息</h3>
                  <el-button
                    type="text"
                    v-if="deliverState != 'see'"
                    @click="handleUpdateAddress"
                    ><i
                      class="el-icon-refresh-right"
                      style="font-size: 16px"
                    ></i
                    >更新地址</el-button
                  >
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="公司名称:">
                      <el-select
                        filterable
                        v-model="formModel.companyName"
                        style="width: 100%"
                        size="small"
                        placeholder="请选择"
                        value-key="companyName"
                        @change="handleCompanyChange"
                      >
                        <el-option
                          :label="item.companyName"
                          :value="item"
                          v-for="(item, index) in companyList"
                          :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="姓名:">
                      <el-input
                        v-model="formModel.senderName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电话:">
                      <el-input
                        v-model="formModel.senderTelephone"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <!-- <el-col :span="8">
                    <el-form-item label="地区:">
                      <el-cascader
                        v-model="formModel.addressArr"
                        style="width: 100%"
                        size="small"
                        :options="address"
                        :props="{ label: 'areaName', value: 'areaCode' }"
                      />
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="8">
                    <el-form-item label="详细地址:">
                      <el-input
                        v-model="formModel.address"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="3">
                <div class="title pl0">
                  <h3>收方信息</h3>
                  <div class="more" v-if="deliverState != 'see'">
                    <el-button type="text" @click="handleAddressBook"
                      ><i class="el-icon-collection" style="font-size: 16px"></i
                      >使用地址簿</el-button
                    >
                    <div class="line"></div>
                    <el-button type="text" @click="handleSaveAddress"
                      ><i class="el-icon-folder-add" style="font-size: 16px"></i
                      >保存新地址</el-button
                    >
                  </div>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="姓名:">
                      <el-input
                        v-model="formModel.receiverName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电话:">
                      <el-input
                        v-model="formModel.receiveTelephone"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :span="8">
                    <el-form-item label="地区:">
                      <el-cascader
                        v-model="formModel.receiveAddressArr"
                        style="width: 100%"
                        size="small"
                        :options="address"
                        @change="receiverAreaChange"
                        :props="{ label: 'areaName', value: 'areaCode' }"
                      />
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="8">
                    <el-form-item label="详细地址:">
                      <el-input
                        v-model="formModel.receiveAddress"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="公司名称:">
                      <el-input
                        v-model="formModel.receiveCompanyName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="4">
                <div class="title pl0">
                  <h3>其他信息</h3>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="收货方式:">
                      <el-select
                        filterable
                        v-model="formModel.receivingWay"
                        placeholder="收货方式"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in receivingTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递方式:">
                      <el-select
                        filterable
                        v-model="formModel.expressWay"
                        style="width: 100%"
                        size="small"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in sendingTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递单号:">
                      <el-input
                        v-model="formModel.expressBillNo"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="送货时间:">
                      <el-date-picker
                        v-model="formModel.expressTime"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        style="width: 100%"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递费用:">
                      <el-input
                        v-model="formModel.expressCost"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="付费方式:">
                      <el-select
                        filterable
                        v-model="formModel.paymentWay"
                        placeholder="请选择付费方式"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in logisticsPaidList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="费用部门:">
                      <el-select
                        filterable
                        v-model="formModel.costAssumeDepartment"
                        placeholder="请选择费用部门"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in departmentList"
                          :key="item.departmentCode"
                          :label="item.departmentName"
                          :value="item.departmentCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="公斤数:">
                      <el-input
                        v-model="formModel.expressGoodsWeight"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="件数:">
                      <el-input
                        v-model="formModel.expressGoodsCount"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="发货备注:">
                      <el-input
                        v-model="formModel.deliveryRemark"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="5">
                <div class="title pl0">
                  <h3>明细</h3>
                  <!-- <el-button type="text" v-if="deliverState != 'see'"
                    ><i
                      class="el-icon-refresh-right"
                      style="font-size: 16px"
                    ></i
                    >更新明细</el-button
                  > -->
                </div>
                <el-table :data="detailListTree">
                  <el-table-column
                    width="190"
                    property="productName"
                    label="产品名称"
                    show-overflow-tooltip
                  >
                    <template #default="scope">
                      <el-select
                        v-model="scope.row.productName"
                        placeholder="请选择产品名称"
                        clearable
                        style="width: 100%"
                        filterable
                        :disabled="deliverState == 'see' || deliveryBillState==1"
                        size="small"
                        @change="
                          handleProductNameChange(
                            scope.row,
                            scope.$index,
                            $event
                          )
                        "
                      >
                        <el-option
                          v-for="(item, index) in productList"
                          :key="index"
                          :label="item.productName"
                          :value="item.productCode"
                        />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productLayout"
                    label="版面"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productVersion"
                    label="版本"
                  >
                  </el-table-column>
                  <el-table-column
                    width="250"
                    property="productSpecificationName"
                    label="型号名称"
                  >
                    <template #default="scope">
                      <el-select
                      v-if="rowData.outStockState != 1"
                        v-model="scope.row.productNo"
                        placeholder="请选择型号名称"
                        clearable
                        style="width: 100%"
                        filterable
                        size="small"
                        :disabled="deliverState == 'see' || deliveryBillState==1"
                        @change="
                          handleSpecificationChange(
                            scope.row,
                            scope.$index,
                            $event
                          )
                        "
                      >
                        <el-option
                          v-for="(item, index) in scope.row
                            .productSpecifications"
                          :key="index"
                          :label="item.productSpecificationName"
                          :value="item.productSpecificationCode"
                        />
                      </el-select>
                      <span v-else>{{ scope.row.productSpecificationName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="250"
                    property="productSpecificationName"
                    label="订单单号"
                  >
                    <template #default="scope">
                      <el-select
                      v-if="rowData.outStockState != 1"
                        v-model="scope.row.associationOrderNo"
                        placeholder="请选择订单单号"
                        clearable
                        :disabled="deliverState == 'see' || deliveryBillState==1"
                        style="width: 100%"
                        filterable
                        size="small"
                        @change="
                          handleSaleOrderChange(scope.row, scope.$index, $event)
                        "
                      >
                        <el-option
                          v-for="(item, index) in scope.row.saleOrders"
                          :key="index"
                          :label="item.saleOrderGroupNumber"
                          :value="item.saleOrderCode"
                        />
                      </el-select>
                      <span v-else>{{ scope.row.saleOrderGroupNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="stockQuantity"
                    label="库存数量"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="waitDeliveryQuantity"
                    label="订单待发货"
                  >
                  </el-table-column>
                  <el-table-column
                    width="150"
                    property="deliveryQuantity"
                    label="发货数量"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryQuantity"
                        :disabled="deliverState == 'see' || deliveryBillState==1"
                        placeholder="请输入内容"
                        size="small"
                        type="number"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="stockBoxCount"
                    label="库存箱数"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="kilogramQuantity"
                    label="公斤数"
                  >
                  </el-table-column>
                  <el-table-column
                    width="250"
                    property="produceDate"
                    label="生产日期"
                  >
                    <template #default="scope">
                      <el-date-picker
                        v-model="scope.row.produceDate"
                        type="date"
                        :disabled="deliverState == 'see' || deliveryBillState==1"
                        size="small"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productUnit"
                    label="单位"
                  >
                  </el-table-column>
                  <el-table-column property="deliveryMxRemark" width="220" label="备注">
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryMxRemark"
                        :disabled="deliverState == 'see' || deliveryBillState==1"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="操作"
                    fixed="right"
                    v-if="deliverState != 'see' && deliveryBillState!=1"
                  >
                    <template #default="scope">
                      <div class="flex">
                        <el-button
                          type="text"
                          @click="handleCopyRow(scope.row, scope.$index)"
                          >复制</el-button
                        >
                        <el-button
                          type="text"
                          size="small"
                          @click="
                            handleDeleteDetailRow(scope.row, scope.$index)
                          "
                          v-if="detailListTree.length > 1"
                          >删除</el-button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShowDeliverForm = false"
          >取 消</el-button
        >
        <el-button
          v-if="deliverState != 'see'"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="handleSaveDeliver"
          >保存</el-button
        >
        <!--  保存      -->
        <el-button
          v-if="deliverState != 'see' && deliveryBillState!=1"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="handleSaveDeliver('confirm')"
          >保存并确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 地址簿   -->
    <el-dialog
      title="地址簿"
      :visible.sync="isShowAddress"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="bodyNoPadDialog bigDialog"
      height="16vh"
      width="70%"
    >
      <div class="dialogDody p16">
        <div class="flex flex_between" style="border-bottom: none">
          <!--      搜索框-->
          <div class="">
            <el-input
              v-model="materalSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-select
                filterable
                v-model="materalSearch.select"
                slot="prepend"
                placeholder="请选择"
                @change="handleSearchChange"
              >
                <el-option label="收货人" :value="1"></el-option>
                <el-option label="联系电话" :value="2"></el-option>
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="handleAddressSearch"
              ></el-button>
            </el-input>
          </div>
          <div>
            <el-button
              type="primary"
              class="mr5"
              size="small"
              @click="handleCreateAddress"
              ><i class="iconfont mr5 f14 plusIcon"></i>新建
            </el-button>
          </div>
        </div>
        <div class="tableBox lastTdNoBorder">
          <div class="tt flex">
            <el-button
              type="primary"
              size="mini"
              :disabled="!currentData"
              @click="handleUseAddress"
            >
              使用
            </el-button>
            <el-button
              type="primary"
              size="mini"
              :disabled="!currentData"
              @click="handleEditRow"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              size="mini"
              :disabled="!currentData"
              @click="handleDeleteAddressRow"
            >
              删除
            </el-button>
            <el-button
              type="primary"
              size="mini"
              :disabled="!currentData || currentData.isDefaultReceive != 0"
              @click="handleSetDefault"
            >
              设为默认
            </el-button>
          </div>
          <el-table
            :data="receiveCompanyList"
            @current-change="handleCurrentChange"
            @row-dblclick="tableDblclick"
            highlight-current-row
          >
            <el-table-column
              width="150"
              property="contactPersonName"
              label="收货人"
            >
              <template #default="scope">
                <span>{{ scope.row.contactPersonName }}</span>
                <el-tag
                  type="danger"
                  size="small"
                  effect="dark"
                  v-if="scope.row.isDefaultReceive == 1"
                >
                  默认
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              width="130"
              property="contactTelephone"
              label="联系电话"
            >
            </el-table-column>
            <el-table-column
              width="200"
              property="fullReceiveAddress"
              show-overflow-tooltip
              label="地区"
            >
            </el-table-column>
            <el-table-column
              width="200"
              property="detailedAddress"
              show-overflow-tooltip
              label="详细地址"
            >
            </el-table-column>
            <el-table-column
              property="companyName"
              label="公司名称"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <!-- 新建地址   -->
    <el-dialog
      :title="'地址簿-' + titleName"
      :visible.sync="isAddMaterriel"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="comDialog "
      width="30%"
      @close="resetForm"
    >
      <div class="dialogDody">
        <div class="addWuliaoBox">
          <el-form
            ref="materForm"
            :model="materForm"
            :rules="materFormRules"
            label-width="80px"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col>
                <el-form-item label="姓名" prop="contactPersonName">
                  <el-input
                    v-model="materForm.contactPersonName"
                    size="mini"
                    placeholder="请输入姓名"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="电话" prop="contactTelephone">
                  <el-input
                    v-model="materForm.contactTelephone"
                    size="mini"
                    placeholder="请输入电话"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="地址" prop="country">
                  <el-cascader
                    v-model="materForm.country"
                    placeholder="省/市/区(地址联动)"
                    size="mini"
                    :options="address"
                    :props="{ label: 'areaName', value: 'areaCode' }"
                    @change="areaChange"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="详细地址" prop="detailedAddress">
                  <el-input
                    v-model="materForm.detailedAddress"
                    size="mini"
                    placeholder="请输入详细地址"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="公司名称">
                  <el-input
                    v-model="materForm.companyName"
                    size="mini"
                    placeholder="请输入公司名称"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="默认地址" prop="isDefaultReceive">
                  <el-switch
                    v-model="materForm.isDefaultReceive"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddMaterriel = false">取 消</el-button>
        <!--  保存      -->
        <el-button
          v-if="ops != 'see'"
          v-loading="addMaterrielLoading"
          :disabled="addMaterrielLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveMater"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!-- 批量发货 -->
    <el-dialog
      :title="'批量发货 - ' + deliverName"
      :visible.sync="isShowBatchForm"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="bodyNoPadDialog bigDialog"
      height="90vh"
      width="75%"
    >
      <div class="dialogDody">
        <div class="flex" style="height: 100%">
          <div class="content_info" @scroll="scrollEvent">
            <el-form
              ref="formModel"
              :model="formModel"
              :rules="rules"
              :disabled="deliverState == 'see'"
              label-width="80px"
            >
              <div class="items" id="1">
                <div class="title pl0">
                  <h3>基本信息</h3>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="发货单号:">
                      <el-input
                        v-model="formModelBatch.deliveryBillNo"
                        placeholder="保存后系统自动生成"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建日期:">
                      <el-input
                        :value="
                          deliverState == 'add'
                            ? getDate()
                            : formModelBatch.createTime
                        "
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建人员:">
                      <el-input
                        :value="
                          deliverState == 'add'
                            ? name
                            : formModelBatch.createByName
                        "
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="发货类型:">
                      <el-select
                        filterable
                        v-model="formModelBatch.deliveryType"
                        style="width: 100%"
                        size="small"
                        disabled
                        placeholder="请选择"
                      >
                        <el-option label="成品发货" :value="1"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="客户名称:" prop="customerCode">
                      <el-select
                        v-model="formModelBatch.customerCode"
                        placeholder="请选择客户名称"
                        clearable
                        style="width: 100%"
                        filterable
                        size="small"
                        @change="handleCustomerNameChange"
                      >
                        <el-option
                          v-for="item in customerList"
                          :key="item.customerCode"
                          :label="item.customerName"
                          :value="item.customerCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="2">
                <div class="title pl0">
                  <h3>寄方信息</h3>
                  <el-button
                    type="text"
                    v-if="deliverState != 'see'"
                    @click="handleUpdateAddress"
                    ><i
                      class="el-icon-refresh-right"
                      style="font-size: 16px"
                    ></i
                    >更新地址</el-button
                  >
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="公司名称:">
                      <el-select
                        filterable
                        v-model="formModelBatch.companyName"
                        style="width: 100%"
                        size="small"
                        placeholder="请选择"
                        value-key="companyName"
                        @change="handleCompanyChange"
                      >
                        <el-option
                          :label="item.companyName"
                          :value="item"
                          v-for="(item, index) in companyList"
                          :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="姓名:">
                      <el-input
                        v-model="formModelBatch.senderName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电话:">
                      <el-input
                        v-model="formModelBatch.senderTelephone"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <!-- <el-col :span="8">
                    <el-form-item label="地区:">
                      <el-cascader
                      filterable
                        v-model="formModelBatch.addressArr"
                        style="width: 100%"
                        size="small"
                        :options="address"
                        :props="{ label: 'areaName', value: 'areaCode' }"
                      />
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="8">
                    <el-form-item label="详细地址:">
                      <el-input
                        v-model="formModelBatch.address"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="发货备注:">
                      <el-input
                        v-model="formModel.deliveryRemark"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="3">
                <div class="title pl0">
                  <h3>产品信息</h3>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="产品名称:">
                      <el-select
                        v-model="formModelBatch.productName"
                        placeholder="请选择产品名称"
                        clearable
                        style="width: 100%"
                        filterable
                        size="small"
                        @change="handleProductChange"
                      >
                        <el-option
                          v-for="(item, index) in detailListTree"
                          :key="index"
                          :label="item.productName"
                          :value="item.productCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="产品型号:">
                      <el-select
                        v-model="formModelBatch.productSpecificationCode"
                        placeholder="请选择产品名称"
                        clearable
                        style="width: 100%"
                        filterable
                        size="small"
                        @change="handleProductSpecificationChange"
                      >
                        <el-option
                          v-for="(
                            item, index
                          ) in formModelBatch.productSpecifications"
                          :key="index"
                          :label="item.productSpecificationName"
                          :value="item.productSpecificationCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="生产日期:">
                      <el-date-picker
                        v-model="formModelBatch.produceDate"
                        type="date"
                        size="small"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="版本:">
                      <el-input
                        v-model="formModelBatch.productVersion"
                        placeholder="请输入内容"
                        disabled
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="库存数量:">
                      <el-input
                        v-model="formModelBatch.stockQuantity"
                        placeholder="请输入内容"
                        disabled
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="发货总数:">
                      <el-input
                        v-model="formModelBatch.total"
                        placeholder="请输入内容"
                        disabled
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="5">
                <div class="title pl0">
                  <h3>明细</h3>
                  <!-- <el-button type="text" v-if="deliverState != 'see'"
                    ><i
                      class="el-icon-refresh-right"
                      style="font-size: 16px"
                    ></i
                    >更新明细</el-button
                  > -->
                  <div class="more" v-if="deliverState != 'see'">
                    <el-button type="text" @click="handleAddressBook"
                      ><i class="el-icon-collection" style="font-size: 16px"></i
                      >使用地址簿</el-button
                    >
                    <div class="line"></div>
                    <el-button type="text" @click="handleCreateAddress"
                      ><i class="el-icon-folder-add" style="font-size: 16px"></i
                      >新增地址</el-button
                    >
                  </div>
                </div>
                <el-table :data="formModelBatch.fhMxList">
                  <el-table-column
                    width="190"
                    property="receiverName"
                    label="收货人"
                    show-overflow-tooltip
                  >
                    <template #default="scope">
                      <el-select
                        v-model="scope.row.receiverName"
                        placeholder="请选择收货人"
                        clearable
                        style="width: 100%"
                        filterable
                        value-key="contactPersonName"
                        size="small"
                        @change="
                          handleContactPersonChange(
                            scope.row,
                            scope.$index,
                            $event
                          )
                        "
                      >
                        <el-option
                          v-for="(item, index) in receiveCompanyList"
                          :key="index"
                          :label="item.contactPersonName"
                          :value="item"
                        />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="150"
                    property="receiveTelephone"
                    label="联系电话"
                  >
                  </el-table-column>
                  <el-table-column
                    width="250"
                    property="fullReceiveAddress"
                    show-overflow-tooltip
                    label="所在地区"
                  >
                  </el-table-column>
                  <el-table-column
                    width="250"
                    property="receiveAddress"
                    show-overflow-tooltip
                    label="详细地址"
                  >
                  </el-table-column>
                  <el-table-column
                    width="150"
                    property="deliveryQuantity"
                    label="发货数量"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryQuantity"
                        placeholder="请输入内容"
                        @blur="handleDeliveryQuantityBlur"
                        size="small"
                        type="number"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="250"
                    property="expressTime"
                    label="送货日期"
                  >
                    <template #default="scope">
                      <el-date-picker
                        v-model="scope.row.expressTime"
                        type="date"
                        size="small"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="200"
                    property="receivingWay"
                    label="收货方式"
                  >
                    <template #default="scope">
                      <el-select
                        filterable
                        v-model="scope.row.receivingWay"
                        placeholder="请选择收货方式"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in receivingTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="200"
                    property="expressWay"
                    label="快递方式"
                  >
                    <template #default="scope">
                      <el-select
                        filterable
                        v-model="scope.row.expressWay"
                        style="width: 100%"
                        size="small"
                        placeholder="请选择快递方式"
                      >
                        <el-option
                          v-for="item in sendingTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="200"
                    property="paymentWay"
                    label="付费方式"
                  >
                    <template #default="scope">
                      <el-select
                        filterable
                        v-model="scope.row.paymentWay"
                        placeholder="请选择付费方式"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in logisticsPaidList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="200"
                    property="costAssumeDepartment"
                    label="费用部门"
                  >
                    <template #default="scope">
                      <el-select
                        filterable
                        v-model="scope.row.costAssumeDepartment"
                        placeholder="请选择费用部门"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in departmentList"
                          :key="item.departmentCode"
                          :label="item.departmentName"
                          :value="item.departmentCode"
                        />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="deliveryMxRemark"
                    width="250"
                    label="备注"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryMxRemark"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    label="操作"
                    fixed="right"
                    v-if="deliverState != 'see'"
                  >
                    <template #default="scope">
                      <div class="flex">
                        <el-button
                          type="text"
                          v-if="
                            formModelBatch.fhMxList.length - 1 != scope.$index
                          "
                          @click="handleCopyBatchRow(scope.row, scope.$index)"
                          >复制</el-button
                        >
                        <el-button
                          type="text"
                          v-if="
                            formModelBatch.fhMxList.length - 1 != scope.$index
                          "
                          size="small"
                          @click="
                            handleDeleteBatchDetailRow(scope.row, scope.$index)
                          "
                          >删除</el-button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShowBatchForm = false"
          >取 消</el-button
        >
        <!--  保存      -->
        <el-button
          v-if="deliverState != 'see'"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="handleSaveDeliverBatch"
          >保存</el-button
        >
        <el-button
          v-if="deliverState != 'see'"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="handleSaveDeliverBatch('confirm')"
          >保存并确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { arraySort } from "@/utils";
import naTable from "@/components/naTable";
import perRedioDialog from "@/components/perDialogRedio";
import selectProductOrder from "@/components/selectProductOrder";
import SelectLLorder from "@/components/selectLLorder";
import Pagination from "@/components/Pagination";
import { formatbytes, parseTime } from "@/utils";
import screec from "@/components/screen";
import { mapGetters } from "vuex";

export default {
  name: "Materiel",
  components: {
    naTable,
    perRedioDialog,
    selectProductOrder,
    SelectLLorder,
    screec,
    Pagination,
  },
  data() {
    return {
      ops: "add", // 操作、新建，修改，查看
      opsid: 1, // 3 确定 1 新建， 4 修改， 2 查看
      searchLoading: false, // 搜索加载效果
      expends: [],
      detailListTree: [],
      cusLoading: false,
      radioCusSelect: null,
      currentCuslistRow: null,
      cusSearch: {
        likeWords: "",
        settlementWay: 0,
        belongToSalesman: "",
        pageIndex: 1,
        pageSize: 10,
      },

      tagList: [
        {
          title: "基本信息",
        },
        {
          title: "寄方信息",
        },
        {
          title: "收方信息",
        },
        {
          title: "其他信息",
        },
        {
          title: "明细",
        },
      ],
      materalSearch: {
        select: 1,
        likeWords: "",
        customerCode: "",
        contactPersonName: "",
        contactTelephone: "",
      },
      materFormRules: {
        contactPersonName: [
          {
            required: true,
            message: "请填写姓名",
            trigger: ["change", "blur"],
          },
        ],
        contactTelephone: [
          {
            required: true,
            message: "请填写电话",
            trigger: ["change", "blur"],
          },
        ],
        country: [
          { required: true, message: "请选择省市区", trigger: "change" },
        ],
        detailedAddress: [
          { required: true, message: "请输入具体地址", trigger: "change" },
        ],
      },
      tabIndex: 0,
      deliverState: "",
      isShowBatchForm: false,
      rowData: {},
      formModel: {
        deliveryType: 1,
        customerCode: "",
        receiveAddressCode: "",
        receivingWay: "",
        expressWay: "",
        expressBillNo: "",
        expressTime: "",
        expressCost: 0,
        addressArr: [],
        receiveAddressArr: [],
        paymentWay: "",
        costAssumeDepartment: "",
        expressGoodsWeight: 0,
        expressGoodsCount: 0,
        deliveryRemark: "",
        saleOrderGroupCode: "",
        companyName: "",
        senderName: "",
        senderTelephone: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        address: "",
        receiveCompanyName: "",
        receiverName: "",
        receiveTelephone: "",
        receiveProvinceCode: "",
        receiveCityCode: "",
        receiveAreaCode: "",
        receiveAddress: "",
        fhMxList: [
          {
            deliveryMxID: 0, //发货单明细主键ID
            deliveryBillNo: "", //	发货单号
            associationOrderNo: "", //关联业务订单号
            productNo: "", //成品代码（可关联得到：成品类型、产品名称、产品单位、库存总箱数、库存总数量、产品版本和印刷版面等）
            productStockNo: "", //成品规格库存代码
            deliveryBoxCount: 0, //发货箱数
            deliveryQuantity: 0, //发货数量
            deliveryMxRemark: "", //发货明细备注
          },
        ],
      },

      //批量发货表单
      formModelBatch: {
        deliveryType: 1,
        customerCode: "",
        companyName: "",
        senderName: "",
        senderTelephone: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        address: "",
        deliveryRemark: "",
        productSpecificationCode: "",
        produceDate: "",
        saleOrders: [
          {
            saleOrderCode: "",
            saleOrderGroupNumber: "",
            xieYiShuHao: "",
            productSpecificationCode: "",
            orderProductSpecificationCode: "",
            productLayout: "",
            waitDeliveryQuantity: 0,
          },
        ],
        fhMxList: [],
      },
      isAddMaterriel: false,
      addMaterrielLoading: false,
      materForm: {
        customerCode: "", //客户编码
        contactPersonName: "", //联系人姓名
        companyName: "", //公司名称
        contactPersonSex: 0, //联系人性别：1男；2女
        contactTelephone: "", //联系人电话
        province: "", //所在省代码
        city: "", //所在市代码
        country: "", //所在县代码
        detailedAddress: "", //详细收货地址
        isDefaultReceive: 0, //isDefaultReceive
      },
      productList: [],
      customerList: [],
      currentData: "",
      deliveryBillState:'',
      formModelCopy: {},
      formModelBatchCopy: {},
      detail: [], //发货明细
      isShowDeliverForm: false,
      saleOrderDeliveryList: [], //发货列表
      receivingTypeList: [], // 收货方式列表
      logisticsPaidList: [], // 付费方式
      sendingTypeList: [], // 快递方式
      departmentList: [], // 费用部门
      companyList: [], //寄方公司
      receiveCompanyList: [], //收方公司
      shippingAddress: [],
      address: [],
      deliveryType: "",
      isShowAddress: false,
      option: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        },
      },
      // 搜索条件
      search: {
        QueryDataBaseFiled: "",
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        customerCode: "", //客户代码，空值查询全部
        deliveryBillState: -5, //发货单状态：0待确认；1已确认；-1已作废，0查询全部
        outStockState: -1, //出库状态：0待出库；1已出库；-1查询全部
        receivingWay: "", //收货方式，空值查询全部
        expressWay: "", //送货方式，空值查询全部
        paymentWay: "", //付款方式，空值查询全部
        costAssumeDepartment: "", //费用承担部门，空值查询全部
      },
      total: 0, // 总条数
      tableHead: [], // 表格表头
      radioContractSelect: null, // 客户合同单选值
      addProductLoading: false,
      rules: {
        backMaterialPersonName: [
          {
            required: true,
            message: "请选择人员",
            trigger: "change",
          },
        ],
      },

      tableData: {
        headId: "head", //表头列显隐组件所需ID-避免多个页面id重复问题
        tableId: "deliveryID", //表格列表key,也就是一条数据的唯一标识
        senior: false, //高级搜索是否显示
        disableWord: "", //是否禁用显示的字段
        addTitle: "",
        disableStatus: "", //判断未禁用的状态值
        addPermission: "MenuCode1-3-1-1", //新建按钮权限
        voidWord: "", //需要查询作废的字段
        //表格按钮
        operationBtn: [
          {
            title: "查看", //按钮名称
            methodsName: "handleClick", //按钮绑定方法的字段
          },
          {
            title: "编辑", //按钮名称
            methodsName: "handleEditDeliver", //按钮绑定方法的字段
            hideCondition: {
              //按钮显隐条件
              prop: "deliveryBillState", //控制显隐的状态字段
              show: [
                //有哪些状态可以使用-值必须跟状态的类型保持一致
                0,1
              ],
            },
          },
          {
            title: "确认", //按钮名称
            methodsName: "handleConfirmDeliver", //按钮绑定方法的字段
            hideCondition: {
              //按钮显隐条件
              prop: "deliveryBillState", //控制显隐的状态字段
              show: [
                //有哪些状态可以使用-值必须跟状态的类型保持一致
                0,
              ],
            },
          },
          {
            title: "删除", //按钮名称
            methodsName: "handleDeleteDeliver", //按钮绑定方法的字段
            hideCondition: {
              //按钮显隐条件
              prop: "deliveryBillState", //控制显隐的状态字段
              show: [
                //有哪些状态可以使用-值必须跟状态的类型保持一致
                0,
              ],
            },
          },
          {
            title: "打印发货单", //按钮名称
            methodsName: "handleDownload", //按钮绑定方法的字段
          },
          {
            title: "下载发货单", //按钮名称
            methodsName: "handlePrint", //按钮绑定方法的字段
          },
        ],
        //表格内容
        tbody: [],
        //表格表头
        thead: [],
      },
    };
  },
  computed: {
    ...mapGetters(["name", "userInfo"]),
    titleName() {
      if (this.ops == "add") {
        return "新建";
      } else if (this.ops == "edit") {
        return "修改";
      } else if (this.ops == "see") {
        return "查看";
      }
    },
    deliverName() {
      if (this.deliverState == "add") {
        return "新建";
      } else if (this.deliverState == "edit") {
        return "修改";
      } else if (this.deliverState == "see") {
        return "查看";
      }
    },
  },
  created() {
    //  所有列表数据
    this.getAllMaterils();
    // 表格得表头
    this.getTableHead();
    //获取地区
    this.getArea();
    //收货方式
    this.getReceivingList();
    //付费方式
    this.getPayTypeList();
    //费用部门
    this.getDepartmentList();
    //快递方式
    this.getSendList();
    this.getQueryPageCustomerList();

    this.formObj = JSON.parse(JSON.stringify(this.materForm));
    this.formModelCopy = JSON.parse(JSON.stringify(this.formModel));
    this.formModelBatchCopy = JSON.parse(JSON.stringify(this.formModelBatch));
  },
  mounted() {},
  methods: {
    //新增批量发货
    handleAddBatchDeliver() {
      this.deliverState = "add";
      this.deliveryType = "batch";
      this.formModelBatch = JSON.parse(JSON.stringify(this.formModelBatchCopy));
      this.formModelBatch.produceDate = this.getDate();
      this.isShowBatchForm = true;
      // this.getCompanyList();
    },

    handleClick(row) {
      this.opsid = 2;
      this.rowData = row;
      this.getDetail(row);
    },

    //产品名称选择事件
    handleProductNameChange(row, index, e) {
      this.productList.forEach((item, i) => {
        if (item.productCode == e) {
          for (let key in item) {
            this.$set(row, key, item[key]);
          }
        }
      });
      if (index == this.detailListTree.length - 1) {
        this.detailListTree.push({
          associationOrderNo: "",
          productNo: "",
          deliveryBoxCount: 0,
          deliveryQuantity: 0,
          deliveryMxRemark: "",
          orderProductSpecificationCode: "",
          kilogramQuantity: 0,
          produceDate: "",
          rowKey: Date.now(),
        });
      }
    },

    //规格型号选择事件
    handleSpecificationChange(row, index, e) {
      row.productSpecifications.forEach((item) => {
        if (item.productSpecificationCode == e) {
          for (let key in item) {
            this.$set(row, key, item[key]);
          }
        }
      });
    },

    //订单选择事件
    handleSaleOrderChange(row, index, e) {
      row.saleOrders.forEach((item) => {
        if (item.saleOrderCode == e) {
          for (let key in item) {
            this.$set(row, key, item[key]);
          }
        }
      });
    },

    handleContactPersonChange(row, index, e) {
      if (index == this.formModelBatch.fhMxList.length - 1) {
        this.formModelBatch.fhMxList.push({
          receiveAddressCode: "",
          receiveCompanyName: "",
          receiverName: "",
          receiveTelephone: "",
          receiveProvinceCode: "",
          receiveCityCode: "",
          receiveAreaCode: "",
          receiveAddress: "",
          receivingWay: "",
          expressWay: "",
          expressBillNo: "",
          expressTime: "",
          expressCost: 0,
          paymentWay: "",
          costAssumeDepartment: "",
          expressGoodsWeight: 0,
          expressGoodsCount: 0,
          deliveryQuantity: 0,
          deliveryBoxCount: 0,
          kilogramQuantity: 0,
          deliveryMxRemark: "",
          rowKey: Date.now(),
        });
      }
      row.receiveTelephone = e.contactTelephone;
      row.receiverName = e.contactPersonName;
      row.fullReceiveAddress = e.fullReceiveAddress;
      row.receiveAddressCode = e.receiveAddressCode;
      row.receiveProvinceCode = e.province;
      row.receiveCityCode = e.city;
      row.receiveAreaCode = e.country;
      row.receiveAddress = e.detailedAddress;
    },

    handleDeliveryQuantityBlur() {
      let sum = 0;
      this.formModelBatch.fhMxList.forEach((item) => {
        sum += Number(item.deliveryQuantity);
      });
      this.$set(this.formModelBatch, "total", sum);
    },

    handleProductChange(e) {
      this.detailListTree.forEach((item, i) => {
        if (item.productCode == e) {
          this.$set(
            this.formModelBatch,
            "productSpecifications",
            item.productSpecifications
          );
          this.$set(this.formModelBatch, "productVersion", item.productVersion);
        }
      });
    },

    handleProductSpecificationChange(e) {
      this.formModelBatch.productSpecifications.forEach((item, i) => {
        if (item.productSpecificationCode == e) {
          this.$set(this.formModelBatch, "saleOrders", item.saleOrders);
          this.$set(this.formModelBatch, "stockQuantity", item.stockQuantity);
        }
      });
    },

    // 获取客户列表
    getQueryPageCustomerList() {
      const cusSearch = {
        likeWords: "",
        settlementWay: 0,
        belongToSalesman: "",
        IsEnabled: 1,
        pageIndex: 1,
        pageSize: 9999,
      };
      this.$api.business.QueryPageCustomerList(cusSearch).then((res) => {
        this.customerList = res.list;
      });
    },
    getDetail(row) {
      let obj = {
        queryBy: 0,
        queryValue: row.deliveryBillNo,
      };
      this.$api.business.GetSaleOrderDeliveryDetail(obj).then((res) => {
        // this.formModel = res;
        // this.$set(this.formModel, "fhMxList", this.formModel.detailList);
        // this.formModel.addressArr = this.formModel.areaCode;
        // this.formModel.receiveAddressArr = this.formModel.receiveAreaCode;

        this.formModel = res;
        this.detailListTree = res.detailList;
        this.formModel.addressArr = this.formModel.areaCode;
        this.formModel.receiveAddressArr = this.formModel.receiveAreaCode;

        this.deliverState = "see";
        let obj = {
          queryBy: 2,
          queryValue: res.customerCode,
        };
        this.$api.business
          .GetSaleOrderDeliveryMxByCustomerCode(obj)
          .then((response) => {
            this.detailListTree.forEach((item) => {
              response.products.forEach((k) => {
                if (item.productCode == k.productCode) {
                  this.$set(
                    item,
                    "productSpecifications",
                    k.productSpecifications
                  );
                  item.productSpecifications.forEach((j) => {
                    if (item.productNo == j.productSpecificationCode) {
                      this.$set(item, "saleOrders", j.saleOrders);
                    }
                  });
                }
              });
            });
            if(this.deliverState != 'see' && this.deliveryBillState!=1){
              this.detailListTree.push({
              associationOrderNo: "",
              productNo: "",
              deliveryBoxCount: 0,
              deliveryQuantity: 0,
              deliveryMxRemark: "",
              orderProductSpecificationCode: "",
              kilogramQuantity: 0,
              produceDate: "",
              rowKey: Date.now(),
		        })
            }
            
            this.isShowDeliverForm = true;
          });
      });
    },

    // 获取表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.saleOrderDeliverylist,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableData.thead = res;
      });
    },
    // 所有列表数据
    getAllMaterils() {
      const parmas = this.search;
      this.searchLoading = true;
      this.$api.business
        .GetMatchPageProduceLogisticss(parmas)
        .then((res) => {
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
        });
    },

    //点击发货明细
    handleDetailClick(row) {
      this.detail = [];
      let obj = {
        queryBy: 0,
        queryValue: row.deliveryBillNo,
      };
      this.$api.business.GetSaleOrderDeliveryDetail(obj).then((res) => {
        this.detail = res.detailList;
      });
    },

    //重置表单
    resetForm() {
      this.materForm = JSON.parse(JSON.stringify(this.formObj));
    },

    //获取寄方公司
    getCompanyList() {
      let obj = {
        queryBy: 0,
        queryValue: this.rowData.customerCode,
      };
      this.$api.business.GetSenderInformation(obj).then((res) => {
        this.companyList = res;
        if (res.length > 0) {
          if (this.deliveryType != "batch") {
            this.formModel.companyName = res[0].companyName;
            this.formModel.senderName = res[0].senderName;
            this.formModel.senderTelephone = res[0].senderTelephone;
            this.formModel.provinceCode = res[0].provinceCode;
            this.formModel.cityCode = res[0].cityCode;
            this.formModel.areaCode = res[0].areaCode;
            this.formModel.address = res[0].address;
            this.formModel.addressArr = res[0].areaCode;
            this.updateAddressForm = res[0];
          } else {
            this.formModelBatch.companyName = res[0].companyName;
            this.formModelBatch.senderName = res[0].senderName;
            this.formModelBatch.senderTelephone = res[0].senderTelephone;
            this.formModelBatch.provinceCode = res[0].provinceCode;
            this.formModelBatch.cityCode = res[0].cityCode;
            this.formModelBatch.areaCode = res[0].areaCode;
            this.formModelBatch.address = res[0].address;
            this.formModelBatch.addressArr = res[0].areaCode;
            this.updateAddressForm = res[0];
          }
        }
      });
    },

    //寄方公司选择事件
    handleCompanyChange(item) {
      if (this.deliveryType != "batch") {
        this.formModel.companyName = item.companyName;
        this.formModel.senderName = item.senderName;
        this.formModel.senderTelephone = item.senderTelephone;
        this.formModel.provinceCode = item.provinceCode;
        this.formModel.cityCode = item.cityCode;
        this.formModel.areaCode = item.areaCode;
        this.formModel.address = item.address;
        this.formModel.addressArr = item.areaCode;
        this.updateAddressForm = item;
      } else {
        this.formModelBatch.companyName = item.companyName;
        this.formModelBatch.senderName = item.senderName;
        this.formModelBatch.senderTelephone = item.senderTelephone;
        this.formModelBatch.provinceCode = item.provinceCode;
        this.formModelBatch.cityCode = item.cityCode;
        this.formModelBatch.areaCode = item.areaCode;
        this.formModelBatch.address = item.address;
        this.formModelBatch.addressArr = item.areaCode;
        this.updateAddressForm = item;
      }
      console.log(item);
    },

    //更新地址
    handleUpdateAddress() {
      if (this.deliveryType != "batch") {
        this.updateAddressForm.companyName = this.formModel.companyName;
        this.updateAddressForm.senderName = this.formModel.senderName;
        this.updateAddressForm.senderTelephone = this.formModel.senderTelephone;
        this.updateAddressForm.provinceCode = this.formModel.provinceCode;
        this.updateAddressForm.cityCode = this.formModel.cityCode;
        this.updateAddressForm.areaCode = this.formModel.areaCode;
        this.updateAddressForm.address = this.formModel.address;
      } else {
        this.updateAddressForm.companyName = this.formModelBatch.companyName;
        this.updateAddressForm.senderName = this.formModelBatch.senderName;
        this.updateAddressForm.senderTelephone =
          this.formModelBatch.senderTelephone;
        this.updateAddressForm.provinceCode = this.formModelBatch.provinceCode;
        this.updateAddressForm.cityCode = this.formModelBatch.cityCode;
        this.updateAddressForm.areaCode = this.formModelBatch.areaCode;
        this.updateAddressForm.address = this.formModelBatch.address;
      }
      this.$api.business
        .UpdateSenderInformation(this.updateAddressForm)
        .then(() => {
          this.$message.success("保存成功");
          this.getCompanyList();
        });
    },

    //获取地址薄列表
    getReceiveCompanyList() {
      this.materalSearch.customerCode = this.rowData.customerCode;
      this.$api.business
        .GetMatchCustomerReceiveAddresss(this.materalSearch)
        .then((res) => {
          this.receiveCompanyList = res;
          if (res.length > 0) {
            this.formModel.receiveCompanyName = res[0].companyName;
            this.formModel.receiverName = res[0].contactPersonName;
            this.formModel.receiveTelephone = res[0].contactTelephone;
            this.formModel.receiveProvinceCode = res[0].province;
            this.formModel.receiveCityCode = res[0].city;
            this.formModel.receiveAreaCode = res[0].country;
            this.formModel.receiveAddress = res[0].detailedAddress;
            this.formModel.receiveAddressArr = res[0].country;
          }
          this.currentData = "";
        });
    },

    //地址簿表格双击事件
    tableDblclick(row) {
      this.formModel.receiveCompanyName = row.companyName;
      this.formModel.receiverName = row.contactPersonName;
      this.formModel.receiveTelephone = row.contactTelephone;
      this.formModel.receiveProvinceCode = row.province;
      this.formModel.receiveCityCode = row.city;
      this.formModel.receiveAreaCode = row.country;
      this.formModel.receiveAddress = row.detailedAddress;
      this.formModel.receiveAddressArr = row.country;
      if(this.deliveryType == "batch"){
        this.formModelBatch.fhMxList.pop()
        this.formModelBatch.fhMxList.push({
          receiveAddressCode: row.receiveAddressCode,
          receiveCompanyName: row.companyName,
          receiverName: row.contactPersonName,
          receiveTelephone: row.contactTelephone,
          receiveProvinceCode: row.province,
          receiveCityCode: row.city,
          receiveAreaCode: row.country,
          receiveAddress: row.detailedAddress,
          fullReceiveAddress :row.fullReceiveAddress,
          receivingWay: "",
          expressWay: "",
          expressBillNo: "",
          expressTime: "",
          expressCost: 0,
          paymentWay: "",
          costAssumeDepartment: "",
          expressGoodsWeight: 0,
          expressGoodsCount: 0,
          deliveryQuantity: 0,
          deliveryBoxCount: 0,
          kilogramQuantity: 0,
          deliveryMxRemark: "",
          rowKey: Date.now(),
        });
        
        this.formModelBatch.fhMxList.push({
          receiveAddressCode: '',
          receiveCompanyName: '',
          receiverName: '',
          receiveTelephone: '',
          receiveProvinceCode: '',
          receiveCityCode: '',
          receiveAreaCode: '',
          receiveAddress:'',
          receivingWay: "",
          expressWay: "",
          expressBillNo: "",
          expressTime: "",
          expressCost: 0,
          paymentWay: "",
          costAssumeDepartment: "",
          expressGoodsWeight: 0,
          expressGoodsCount: 0,
          deliveryQuantity: 0,
          deliveryBoxCount: 0,
          kilogramQuantity: 0,
          deliveryMxRemark: "",
          rowKey: Date.now(),
        });
      }
      this.isShowAddress = false;
    },

    //地址搜索下拉
    handleSearchChange(val) {
      if (val == 1) {
        this.materalSearch.contactPersonName = this.materalSearch.likeWords;
        this.materalSearch.contactTelephone = "";
      } else if (val == 2) {
        this.materalSearch.contactPersonName = "";
        this.materalSearch.contactTelephone = this.materalSearch.likeWords;
      }
    },

    //设为默认
    handleSetDefault() {
      let obj = {
        receiveAddressID: this.currentData.receiveAddressID,
        customerCode: this.rowData.customerCode,
      };
      this.$api.business.SetDefaultReceiveAddress(obj).then((res) => {
        this.$message.success("设置成功");
        this.getReceiveCompanyList();
      });
    },

    getHour(list) {
      let sum = 0;
      list.forEach((item) => {
        sum += item.actualHour;
      });
      return sum;
    },

    //新建发货
    handleAddDeliver() {
      this.isShowDeliverForm = true;
      this.formModel = JSON.parse(JSON.stringify(this.formModelCopy));
      this.deliverState = "add";
      this.deliveryBillState = 0
      this.detailListTree = []
      this.deliveryType = "separate";
      this.formModel.saleOrderGroupCode = this.rowData.saleOrderGroupCode;
    },

    //使用地址簿
    handleAddressBook() {
      // this.getShippingAdress();
      this.getReceiveCompanyList();
      this.isShowAddress = true;
    },

    //新建地址
    handleCreateAddress() {
      this.isAddMaterriel = true;
      this.ops = "add";
    },

    //复制明细
    handleCopyRow(row, index) {
      let arr = JSON.parse(JSON.stringify(row));
      this.detailListTree.splice(index, 0, arr);
    },

    //删除发货设置明细
    handleDeleteDetailRow(row, index) {
      this.detailListTree.splice(index, 1);
    },

    //复制批量明细
    handleCopyBatchRow(row, index) {
      let arr = JSON.parse(JSON.stringify(row));
      arr.rowKey = Date.now();
      this.formModelBatch.fhMxList.splice(index, 0, arr);
    },

    //删除批量明细
    handleDeleteBatchDetailRow(row, index) {
      this.formModelBatch.fhMxList.splice(index, 1);
    },

    //客户名称选择事件
    handleCustomerNameChange(e) {
      this.rowData.customerCode = e;
      this.formModel.customerCode = e;
      this.getCompanyList();
      this.getDeliverDetail(e);
      this.getReceiveCompanyList();

      this.$forceUpdate();
    },

    //获取发货明细
    getDeliverDetail(code) {
      let obj = {
        queryBy: 2,
        queryValue: code,
      };
      this.$api.business
        .GetSaleOrderDeliveryMxByCustomerCode(obj)
        .then((res) => {
          this.productList = res.products;
          console.log(this.productList)

          if (this.deliveryType != "batch") {
            this.detailListTree = []
            // this.$set(this.formModel, "fhMxList", res.products);
            this.formModel.receiverName = "";
            this.formModel.receiveTelephone = "";
            this.formModel.receiveAddressArr = "";
            this.formModel.receiveAddress = "";
            this.formModel.receiveCompanyName = "";
            this.detailListTree.push({
              associationOrderNo: "",
              productNo: "",
              deliveryBoxCount: 0,
              deliveryQuantity: 0,
              deliveryMxRemark: "",
              orderProductSpecificationCode: "",
              kilogramQuantity: 0,
              produceDate: "",
            });
          } else {
            this.detailListTree = res.products
            this.formModelBatch.fhMxList = [];
            this.formModelBatch.fhMxList.push({
              receiveAddressCode: "",
              receiveCompanyName: "",
              receiverName: "",
              receiveTelephone: "",
              receiveProvinceCode: "",
              receiveCityCode: "",
              receiveAreaCode: "",
              receiveAddress: "",
              receivingWay: "",
              expressWay: "",
              expressBillNo: "",
              expressTime: "",
              expressCost: 0,
              paymentWay: "",
              costAssumeDepartment: "",
              expressGoodsWeight: 0,
              expressGoodsCount: 0,
              deliveryQuantity: 0,
              deliveryBoxCount: 0,
              kilogramQuantity: 0,
              deliveryMxRemark: "",
            });
          }
          this.detailListTree.forEach((item) => {
            item.produceDate = this.getDate();
          });
          // this.formModel.fhMxList = res;
        });
    },

    //地址搜索点击事件
    handleAddressSearch() {
      if (this.materalSearch.select == 1) {
        this.materalSearch.contactPersonName = this.materalSearch.likeWords;
        this.materalSearch.contactTelephone = "";
      } else if (this.materalSearch.select == 2) {
        this.materalSearch.contactPersonName = "";
        this.materalSearch.contactTelephone = this.materalSearch.likeWords;
      }
      this.getReceiveCompanyList();
    },

    //寄方地址
    handleAreaChange(val) {
      this.formModel.provinceCode = val ? val[0] : "";
      this.formModel.cityCode = val ? val[1] : "";
      this.formModel.areaCode = val ? val[2] : "";

      this.updateAddressForm.provinceCode = val ? val[0] : "";
      this.updateAddressForm.cityCode = val ? val[1] : "";
      this.updateAddressForm.areaCode = val ? val[2] : "";
    },

    //收方地址
    receiverAreaChange(val) {
      this.formModel.receiveProvinceCode = val ? val[0] : "";
      this.formModel.receiveCityCode = val ? val[1] : "";
      this.formModel.receiveAreaCode = val ? val[2] : "";
    },

    // 选择地址
    areaChange(val) {
      this.materForm.province = val ? val[0] : "";
      this.materForm.city = val ? val[1] : "";
      this.materForm.country = val ? val[2] : "";
    },

    // 地区联动数据
    getArea() {
      this.$api.common.GetTreeAreaDataList().then((res) => {
        this.address = res;
      });
    },

    //保存发货设置
    handleSaveDeliver(type) {
      if (this.detailListTree.length <= 1 && this.deliveryBillState != 1) {
        this.$message.warning("请选择明细");
        return;
      }
      if(this.deliveryBillState != 1){
        this.detailListTree.pop();
      }
      this.formModel.fhMxList = this.detailListTree;
      if (this.deliverState == "add") {
        if(type == 'confirm'){
          this.$api.business.AddProduceLogistics(this.formModel).then((res) => {
            this.$api.business
            .SureProduceLogistics({ entityID: res.deliveryID })
            .then(() => {
              this.$message.success("确认成功");
              this.getAllMaterils();
              this.isShowDeliverForm = false;
            });
          });
        }else{
          this.$api.business.AddProduceLogistics(this.formModel).then(() => {
            this.$message.success("保存成功");
            this.getAllMaterils();
            this.isShowDeliverForm = false;
          });
        }
      } else if (this.deliverState == "edit") {
        if(type == 'confirm'){
          this.$api.business.UpdateProduceLogistics(this.formModel).then(() => {
            this.$api.business
            .SureProduceLogistics({ entityID: this.formModel.deliveryID })
            .then(() => {
              this.$message.success("确认成功");
              this.getAllMaterils();
              this.isShowDeliverForm = false;
            });
          });
        }else{
          this.$api.business.UpdateProduceLogistics(this.formModel).then(() => {
            this.$message.success("修改成功");
            this.getAllMaterils();
            this.isShowDeliverForm = false;
          });
        }
      }
    },

    //保存批量发货
    handleSaveDeliverBatch(type) {
      if (this.formModelBatch.fhMxList.length <= 1) {
        this.$message.warning("请选择发货明细");
        return;
      }
      this.formModelBatch.fhMxList.pop();
      if(type == 'confirm'){
        this.$api.business
          .CreateSaleOrderDeliveryBatch(this.formModelBatch)
          .then((res) => {
            res.forEach((item)=>{
              this.$api.business
              .SureProduceLogistics({ entityCode: item.deliveryBillNo })
              .then(() => {
                this.$message.success("确认成功");
                this.getAllMaterils();
                this.isShowBatchForm = false;
            });
            })
            
          });
      }else{
        this.$api.business
          .CreateSaleOrderDeliveryBatch(this.formModelBatch)
          .then(() => {
            this.$message.success("保存成功");
            this.getAllMaterils();
            this.isShowBatchForm = false;
          });
      }
    },

    //确认发货单
    handleConfirmDeliver(row) {
      this.$confirm("是否确认该发货单?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.$api.business
            .SureProduceLogistics({ entityID: row.deliveryID })
            .then(() => {
              this.$message.success("确认成功");
              this.getAllMaterils();
            });
        })
        .catch(() => {});
    },

    //删除发货单
    handleDeleteDeliver(row) {
      this.$confirm("是否确认删除该发货单?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          let obj = {
            entityID: row.deliveryID,
            entityCode: "",
          };
          this.$api.business.DeleteProduceLogistics(obj).then((res) => {
            this.$message.success("删除成功");
            this.getAllMaterils();
          });
        })
        .catch(() => {});
    },

    //下载发货单
    handleDownload(row) {
      let parmas = {
        templateTypeCode: "MBLX0006", //	模板类型编号
        customerCode: row.customerCode,
        condition: {
          DeliveryBillNo: row.deliveryBillNo,
        }, //查询条件
      };
      this.$api.system.DownLoadTemplate(parmas).then((res) => {
        window.open(res);
      });
    },


    //打印发货单
    handlePrint(row){
      let parmas = {
        templateTypeCode: "MBLX0006", //	模板类型编号
        customerCode: row.customerCode,
        condition: {
          DeliveryBillNo: row.deliveryBillNo,
        }, //查询条件
      };
      this.$api.system.DownLoadTemplateExcel(parmas).then((res) => {
        window.open(res);
      });
    },

    //保存电话薄
    saveMater() {
      this.materForm.customerCode = this.rowData.customerCode;
      this.$refs.materForm.validate((valid) => {
        if (valid) {
          if (this.ops == "add") {
            const parmas = this.materForm;
            this.$api.business
              .AddReceiveAddress(parmas)
              .then(() => {
                this.$message({
                  message: "新建成功",
                  type: "success",
                });
                this.isAddMaterriel = false;
                this.getReceiveCompanyList();
              })
              .catch(() => {
                // this.addLableLoading = false;
              });
          } else if (this.ops == "edit") {
            const parmas = this.materForm;
            this.$api.business
              .UpdateReceiveAddress(parmas)
              .then(() => {
                // 获取客户收货地址
                // this.getShippingAdress();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.isAddMaterriel = false;
                this.getReceiveCompanyList();
              })
              .catch(() => {
                // this.addLableLoading = false
              });
          }
        }
      });
    },

    //表格单击事件
    handleCurrentChange(row) {
      this.currentData = row;
    },

    //编辑地址薄行
    handleEditRow() {
      this.ops = "edit";
      this.materForm = JSON.parse(JSON.stringify(this.currentData));
      this.isAddMaterriel = true;
    },

    //删除地址簿行
    handleDeleteAddressRow() {
      this.$confirm("是否删除该地址?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.$api.business
            .DeleteReceiveAddress({
              receiveAddressID: this.currentData.receiveAddressID,
            })
            .then(() => {
              this.$message.success("删除成功");
              this.getReceiveCompanyList();
            });
        })
        .catch(() => {});
    },

    // 获取送货方式数据列表 receivingTypeList
    getSendList() {
      const params = {
        DictionaryCode: "SendingType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.sendingTypeList = res;
      });
    },

    //保存新地址
    handleSaveAddress() {
      let parmas = {
        customerCode: this.rowData.customerCode, //客户编码
        contactPersonName: this.formModel.receiverName, //联系人姓名
        companyName: this.formModel.receiveCompanyName, //公司名称
        contactPersonSex: 0, //联系人性别：1男；2女
        contactTelephone: this.formModel.receiveTelephone, //联系人电话
        province: this.formModel.receiveProvinceCode, //所在省代码
        city: this.formModel.receiveCityCode, //所在市代码
        country: this.formModel.receiveAreaCode, //所在县代码
        detailedAddress: this.formModel.receiveAddress, //详细收货地址
        isDefaultReceive: 0, //isDefaultReceive
      };
      this.$api.business
        .AddReceiveAddress(parmas)
        .then(() => {
          this.$message({
            message: "新建成功",
            type: "success",
          });
          this.isAddMaterriel = false;
          this.getReceiveCompanyList();
        })
        .catch(() => {
          // this.addLableLoading = false;
        });
    },

    //使用地址
    handleUseAddress() {
      this.formModel.receiveCompanyName = this.currentData.companyName;
      this.formModel.receiverName = this.currentData.contactPersonName;
      this.formModel.receiveTelephone = this.currentData.contactTelephone;
      this.formModel.receiveProvinceCode = this.currentData.province;
      this.formModel.receiveCityCode = this.currentData.city;
      this.formModel.receiveAreaCode = this.currentData.country;
      this.formModel.receiveAddress = this.currentData.detailedAddress;
      this.formModel.receiveAddressArr = this.currentData.country;
      this.isShowAddress = false;
    },

    // 获取客户收货地址
    getShippingAdress() {
      const parmas = {
        customerCode: this.rowData.customerCode,
      };
      this.$api.business.QueryCustomersReceiveAddresses(parmas).then((res) => {
        this.shippingAddress = res;
      });
    },
    //编辑发货单
    handleEditDeliver(row) {
      this.deliveryBillState = row.deliveryBillState
      this.rowData = row;
      let obj = {
        queryBy: 0,
        queryValue: row.deliveryBillNo,
      };
      this.$api.business.GetSaleOrderDeliveryDetail(obj).then((res) => {
        this.formModel = res;
        this.detailListTree = res.detailList;
        this.formModel.addressArr = this.formModel.areaCode;
        this.formModel.receiveAddressArr = this.formModel.receiveAreaCode;
        this.deliverState = "edit";

        let obj = {
          queryBy: 2,
          queryValue: res.customerCode,
        };
        this.$api.business
          .GetSaleOrderDeliveryMxByCustomerCode(obj)
          .then((response) => {
            this.detailListTree.forEach((item) => {
              response.products.forEach((k) => {
                if (item.productCode == k.productCode) {
                  this.$set(
                    item,
                    "productSpecifications",
                    k.productSpecifications
                  );
                  item.productSpecifications.forEach((j) => {
                    if (item.productNo == j.productSpecificationCode) {
                      this.$set(item, "saleOrders", j.saleOrders);
                    }
                  });
                }
              });
            });
            if(this.deliverState != 'see' && this.deliveryBillState!=1){
              this.detailListTree.push({
              associationOrderNo: "",
              productNo: "",
              deliveryBoxCount: 0,
              deliveryQuantity: 0,
              deliveryMxRemark: "",
              orderProductSpecificationCode: "",
              kilogramQuantity: 0,
              produceDate: "",
              rowKey: Date.now(),
		        })
            }
            
            this.isShowDeliverForm = true;
          });
      });
    },

    getDate() {
      return this.dayjs().format("YYYY-MM-DD");
    },

    // 获取收货方式数据列表
    getReceivingList() {
      const params = {
        DictionaryCode: "ReceivingType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.receivingTypeList = res;
      });
    },

    // 地区联动数据
    getArea() {
      this.$api.common.GetTreeAreaDataList().then((res) => {
        this.address = res;
      });
    },
    // 获取付费方式数据列表
    getPayTypeList() {
      const params = {
        DictionaryCode: "LogisticsPaidType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.logisticsPaidList = res;
      });
    },
    // 获取费用部门数据列表
    getDepartmentList() {
      this.$api.warehouse.GetDepartmentTreeData({}).then((res) => {
        this.departmentList = res;
      });
    },

    //详情滑动事件
    scrollEvent(e) {
      let scrollItems = document.querySelectorAll(".items");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.tabIndex = i;
          break;
        }
      }
      // 滚动条触底了
      if (
        e.srcElement.scrollTop + e.srcElement.offsetHeight ===
        e.srcElement.scrollHeight
      ) {
        // this.tabIndex = this.tagList.length
      }
    },

    //左侧tab栏点击事件
    handleTagClick(item, index) {
      this.tabIndex = index;
      let jump = document.querySelectorAll(".items");
      jump[index].scrollIntoView({ block: "start", behavior: "smooth" });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.el-table thead {
  color: #909399;
  font-weight: 500;
}

.more {
  display: flex;
  align-items: center;
}

.line {
  margin: 0 6px;
  background-color: rgb(194, 194, 194);
  width: 1px;
  height: 12px;
}

.spot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}

.tableBox {
  margin-top: 16px;
  border: 1px solid #e6e6e6;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  overflow: hidden;

  .tt {
    height: 38px;
    line-height: 38px;
    padding-left: 8px;
    background: #f7f8fa;
    border-radius: 8px 8px 0 0;
  }
}

.table_body {
  height: 85%;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

.content_info {
  margin-left: 10px;
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  padding-right: 16px;
  padding-bottom: 16px;
}

.table_body_item {
  display: flex;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.table_body_item:hover {
  border-color: #3967ff;
}

.table_body_item > div {
  width: 100px;
}

.table_body_item > div:first-child {
  flex: 1;
}

.receipt_info {
  display: flex;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  min-width: 300px;
  min-height: 96px;
  .flag {
    padding-left: 3px;
    width: 20px;
    background: #3967ff;
    border-radius: 4px 0 0 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 23px;
  }

  .address {
    padding: 8px;
    p {
      margin-top: 12px;
      color: #999aaa;
    }
  }
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  div {
    margin-bottom: 6px;
  }
}

.table_head {
  margin-bottom: 8px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  font-weight: 700;
  div {
    padding: 8px 16px;
    width: 200px;
  }
  > div:first-child {
    flex: 1;
  }
}

.left_tag {
  width: 120px;
  height: 100%;
  border-right: 1px solid rgb(238, 238, 238);
  background-color: #fff;
  p {
    padding: 11px 0;
    position: relative;
    padding-right: 10px;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
  }
}

.active {
  color: #3f61f1;
  &::after {
    content: "";
    width: 3px;
    height: 16px;
    position: absolute;
    right: 0;
    top: calc(50% - 8px);
    background: #3f61f1;
  }
}
.table_head_address {
  margin-bottom: 8px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  font-weight: 700;
  div {
    padding: 8px 16px;
    width: 100px;
  }
  > div:first-child {
    flex: 1;
  }
}

.table_th {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
}

.table_tr {
  margin-bottom: 8px;
}

.key {
  padding-right: 16px;
  color: #999aaa;
}
.val {
  padding-right: 16px;
  padding-left: 4px;
  color: #333;
}

.product_info_box {
  border-bottom: 1px solid #e6e6e6;
}

.product_info_box:last-child {
  border-bottom: none;
}
.table_head_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.product_info {
  min-width: 400px !important;
  flex: 1;
  display: flex;
  .product_img {
    margin-right: 8px;
    width: 110px;
    height: 110px;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  p {
    padding-bottom: 6px;
  }
  .product_detail {
    flex: 1;
  }
}

::v-deep .el-input-group__prepend div.el-select .el-input__inner {
  width: 126px !important;
  padding: 0 25px;
}

::v-deep .el-input__suffix {
  right: 12px;
}

.table_body_info {
  display: flex;
  background: #fff;
  > div {
    padding: 10px 16px;
    width: 200px;
    text-align: center;
    border-right: 1px solid #e6e6e6;
  }
  div:first-child {
    text-align: left;
  }
  div:last-child {
    border: none;
  }
}

.head_bar {
  height: 32px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
</style>
